<script setup>
import Layout from './components/layout.vue'
import workspace from './workspace.vue'
import sidebar from './sidebar.vue'
import { isRef, reactive, ref } from 'vue-demi'

const group = reactive([])

const updatesopes = function(){
  group.push(
    {
      x1: 300,
      y1: 100,
      x2: 400,
      y2: 100,
      x: 0,
      y: 0,
      id: `svg_${group.length + 1}`,
      rotate: 0,
      checked: false
    }
  )
}

</script>
<template>
  <div class="edit">
    <layout>
      <template v-slot:workspace>
        <workspace :group="group"/>
      </template>
      <template v-slot:sidebar>
        <sidebar @updatesopes="updatesopes"/>
      </template>
    </layout>
  </div>
</template>
<style lang="scss" scoped>
.edit{
  height: 100%;
}
</style>